<template>
  <div class="aiChat_container">
    <van-nav-bar
			:title="title"
			left-arrow
			@click-left="onClickLeft"
			@click-right="onClickRight"
			class="aiChat_container_navBar"
		>
			<template #right>
				<div style="display: flex;align-items: center;" @click="diamondRecharge">
					<span class="mr-0">{{ diamond }}</span>
					 <img src="@/image/diamond/icon_ai_zs_x@1x.png" alt="">
				</div>
			</template>
		</van-nav-bar>
		<div class="aiChat_container_chatList">
			<div class="aiChat_container_chatList_box padding-1">
				<div v-for="(item,index) in chatList" :key="index">
					<div class="chatList_box_items content_right">
						<div class="chatList_box_items_content">{{item.textcountent}}</div>
					</div>
					<div class="chatList_box_items content_left" v-if="item.callback">
						<div class="chatList_box_items_content">{{item.callback}}</div>
						<van-loading size="15" v-if="item.callback == ' '"/>
					</div>
				</div>
			</div>
		</div>
		<div class="aiChat_container_chatBox">
			<input type="text" v-model="chatContent" :placeholder="$t('请输入消息')">
			<button @click="sendChat">{{$t('发送')}}</button>
		</div>
		<van-popup class="diamondRecharge_popup padding-1" v-model="diamondShow" closeable position="bottom" :style="{ height: '60%' }" >
			<div class="diamondRecharge_popup_header">
				<div class="header_item">
					<img src="@/image/aiQuantization/indexContent/SAT.png" alt="">
					<span class="header_item_text">{{ satBalance }}</span>
				</div>
			</div>
			<div class="diamondRecharge_popup_imgs">
				<div class="gradient-circle-container">
					<img src="@/image/diamond/pic_ai_zs_d@1x.png" class="center-image" alt="">
				</div>
			</div>
			<div class="diamondRecharge_popup_content mb-2">
				<div v-for="(item,index) in diamondList" :key="index" :class="['content_item' , activeId == item.id ? 'active' : '']" @click="activeId = item.id">
					<img src="@/image/diamond/icon_ai_zs_d@1x.png" alt="">
					<div class="content_item_num mb-0">{{item.num}}</div>
					<p class="content_item_text mb-1">{{$t('钻石')}}</p>
					<div class="content_item_price">{{Number(item.price).toFixed(2)}} SAT</div>
				</div>
			</div>
			<button @click="buyDiamond">{{$t('充值')}}</button>
		</van-popup>
  </div>
</template>

<script>
import { aiChatSend , aiChatCallback , getAiChatList , getDiamondList , diamondRecharge } from "@/request/homePage"
import { getUserInfo } from "@/request/personalCenter"
export default {
    name: 'AiChat',
		data(){
			return {
				title: "AI",
				diamond: 0,
				chatContent: '',
				loading: false,
				chatList: [],
				diamondShow: false,
				satBalance: 0,
				diamondList: [],
				activeId: '',
			}
		},
		mounted(){
			this.getInfo()
		},
		methods: {
			getInfo(){
				getAiChatList().then(res=>{
					if(res.code == 1){
						this.chatList = res.data
					}
				})
				this.getDiamondNum()
			},
			getDiamondNum(){
				getUserInfo().then(res=>{
				  if(res.code == 1){
						this.diamond = res.data.gold || 0
						this.satBalance = res.data.sat || 0
					}
				})
				getDiamondList().then(res=>{
						if(res.code == 1){
							this.diamondList = res.data
						}
				})
			},
			onClickLeft(){
				this.$router.go(-1)
			},
			onClickRight(){

			},
			sendChat(){
				if(!this.chatContent){
					return 
				}
				aiChatSend({src: this.chatContent}).then(res=>{
					if(res.code == 1){
						this.chatList.unshift({
								textcountent: this.chatContent,
								callback: ' ' // 初始化为空格表示等待回复
						});
						this.chatContent = ''
						setTimeout(() => {
							this.aiChatCallback(res.data.data.id , res.data.msg.id)
						}, 25000);
					}else{
						this.$toast.fail(res.msg)
					}
				})
			},
			aiChatCallback(id , msgId){
				aiChatCallback({id: id , src: msgId}).then(res=>{
					if(res.code == 1){
						this.getInfo()
					}
				})
			},
			diamondRecharge(){
				// 钻石充值
				this.diamondShow = true
			},
			buyDiamond(){
				// 购买钻石
				if(this.activeId == '') return
				diamondRecharge({id: this.activeId}).then(res=>{
					if(res.code == 1){
						this.$toast.success(this.$t('充值成功'))
						this.diamondShow = false
						this.getDiamondNum()
					}
				})
			}
		}
}
</script>

<style>

</style>